<template>
    <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
        <!-- 表单 -->
        <el-card>
            <span style="font-size: 13px">项目编号：</span>
            <el-input size="small" v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

            <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
            <el-input size="small" v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>


            <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
            <el-select size="small" v-model="projectSearch.purchaseCategoryId" placeholder="请选择" style="width: 130px">
                <el-option label="货物类" value="1"></el-option>
                <el-option label="服务类" value="2"></el-option>
                <el-option label="工程类" value="3"></el-option>
            </el-select>

            <span style="font-size: 13px;margin-left: 3%">归档审批状态：</span>
            <el-select size="small" v-model="projectSearch.archiveApproveStatus" placeholder="请选择" style="width: 130px">
                <el-option label="审批通过" value="审批通过"></el-option>
                <el-option label="未审批" value="未审批"></el-option>
                <el-option label="退回" value="退回"></el-option>
            </el-select>

            <div style="display: inline;margin-left: 10%">
                <el-button class="search-button" size="mini" @click="queryClick" type="primary">查询</el-button>
                <el-button size="mini" @click="clearMes">清空查询</el-button>
            </div>
        </el-card>

        <!-- 表格 -->
        <div style="margin-top: 10px;margin-bottom: 10px">
            <el-table
                    :data="projectTable"
                    style="width: 100%"
                    v-loading="loading"
                    :max-height="tableHeight"
                    border
            >
                <el-table-column prop="projectCode" label="项目编号"></el-table-column>
                <el-table-column prop="projectName" label="项目名称"></el-table-column>
                <el-table-column prop="categoryName" label="采购类别"></el-table-column>
                <el-table-column prop="purchaseMethod" label="采购方式"></el-table-column>
                <el-table-column prop="budget" label="预算金额(元)"></el-table-column>
                <el-table-column prop="state" label="归档审批状态"></el-table-column>
                <el-table-column prop="quaApproveTime" label="审批通过时间"></el-table-column>
                <el-table-column
                    prop="createTime"
                    min-width="150px"
                    label="创建时间">
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template slot-scope="{$index,row}">
                        <!-- 在这里添加操作按钮 -->
                        <el-button type="text" @click="goToManager(row)">归档审批</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[20, 30, 50,100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                ></el-pagination>
            </div>
            <el-dialog
                title="归档审批管理"
                :visible.sync="centerDialogVisible"
                width="75%"
                center>
                <archive-approve-manger :projectInfo="projectInfo" :closeDialog="closeDialog" :queryClick="queryClick"
                                        :canBeArchived="canBeArchived" :projectFileTable="projectFileTable" :categoryName="categoryName"/>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {getProjectInfo, queryConditionArchive} from "@/api/shoppingManage/archiveApproval";
import archiveApproveManger from "@/components/shoppingManage/archiveApproveManger.vue";
import {selectAllArchiveManger} from "@/api/archive/archive";



export default {
    data() {
        return {
            projectSearch: {
                projectName: "",
                projectCode: "",
                purchaseCategoryId: "",
                archiveApproveStatus: "",
            },
            projectTable: [],
            projectList: [],
            currentPage: 1,
            pageSize: 20,
            loading: true, // 修改是否显示加载页面
            total: 0,
            centerDialogVisible: false,
            projectInfo: {}, // 用来保存项目的信息
            projectFileTable:[], // 保存返回项目文件信息
            canBeArchived: "" , // 问刘焌佚，我不知道
            categoryName: "", // 存采购类别
            tableHeight:200 , // 表格默认高度
        };
    },

    mounted() {
        this.queryClick()
    },
    components:{
        archiveApproveManger
    },

    methods: {
        //清空查询
        clearMes() {
            Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
        },
        // 关闭弹窗
        closeDialog(){
            this.centerDialogVisible = false
        },

        // 请求获得返回的项目
        async queryClick() {
            let theDate = {
                page: this.currentPage,
                pageSize: this.pageSize,
                projectCode: this.projectSearch.projectCode,
                projectName: this.projectSearch.projectName,
                purchaseCategoryId: this.projectSearch.purchaseCategoryId,
                approvalStatus: this.projectSearch.archiveApproveStatus,
            }
            let res = await queryConditionArchive(theDate)
            if (res) {
                this.loading = false
            }
            if (res.data.code === 200) {
                this.projectTable = res.data.data.projectVos;
                this.total = res.data.data.total
            } else {
                this.projectTable = [];
                this.total = 0;
                this.$message.error(res.data.msg);
            }
        },

        //分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.queryClick()
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.queryClick()
        },

        // 点击项目管理进行跳转
        goToManager(row) {
            this.categoryName = row.categoryName;
            this.projectFileTable = [];
            this.canBeArchived = ""
            this.getProject(row.projectId)
            this.selectAllProjectTable(row.projectId);
            this.centerDialogVisible = true
        },
        // 获得项目信息
        async getProject(data) {
            let res = await getProjectInfo(data)
            if (res.data.code === 200){
                this.projectInfo = res.data.data;
            }else {
                this.projectInfo = {}
                this.$message.error(res.data.msg)
            }
        },
        //初始化projectTable里的数据
        async selectAllProjectTable(projectId) {
            let data ={ projectId: projectId }
            try {
                console.log(data)
                const response = await selectAllArchiveManger(data);
                if (response){
                    this.loading = false
                }
                if (response.data.success){
                    this.projectFileTable = response.data.data.archiveFileList;
                    this.canBeArchived = response.data.data.canBeArchived;
                }else {
                    this.$message.error(response.data.msg)
                }

            } catch (error) {
                console.error('Error fetching supplier data:', error);
            }
        },

    },
    created() {
        this.tableHeight = window.innerHeight - 350;
    }
};
</script>

<style>

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
</style>
